import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'
import approval from './modules/approval'
import attendance from './modules/attendance'
import department from './modules/department'
import employee from './modules/employee'
import permission from './modules/permission'
import role from './modules/role'
import salary from './modules/salary'
import social from './modules/social'
import newPage from './modules/newpage'
// import test from './modules/test'

Vue.use(Router)
// 把二级路由其他子模块拆分出去，然后二级路由路径为/二级路由路由路径，因为一级路由是/，所以自动将二级路由显示在一级路由下了
// 菜单也不会出现嵌套

export const liveRoutes = [
  department,
  role,
  employee,
  permission,
  attendance,
  approval,
  salary,
  social,
  newPage
]
export const constantRoutes = [
  // 登陆路由
  { path: '/login', component: () => import('@/views/login') },
  // 首页路由
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      { path: 'dashboard',
        name: 'dashboard',
        component: () => import('@/views/dashboard'),
        // 自己只有一个的时候父级菜单会省略，如果有多个子级，就会出现一层父级嵌套多个自己菜单
        // 添加属性hidden：true，那么就会不显示菜单
        meta: {
          title: '首页',
          icon: 'dashboard'
        }
      }
    ]
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  }

  // 404 page must be placed at the end !!!

]

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// // 动态添加路由
// router.addRoutes(liveRoutes)

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465

// 重置路由方法
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

/* 1.路由访问权限（RBAC）
1.将路由拆分为动态路由和静态路由
2.讲动态路由模块全部放到一个数组中
3.在路由前置守卫获取用户数据中有一个权限数据
4.获取到所有的路由的path去到 / 过滤当前用户的权限，得到一个新数组
5.将新数组用 router.addRoutes（...【新数组】） 方法插入路由到实例中，通配符也要在后面插入
*/

/* 2.控制侧边栏显示显现路由
1.在vuex中定义routes全部可以显示的路由，mutations修改变量，将routes定义在getters里面
2.在permission中拼接静态路由和动态路由，*重定向放在最后一个路由后，使用vuex.commit调用修改routes的方法
3.在sideBar 中将这个路由导入，遍历到导航栏中
*/

/* 3.RBAC按钮权限
1.使用自定义指令 ，判断用户资料中的一个按钮权限数组
2.判断当前按钮的指令的value这个数组有没有包含，没有包含的话删除该元素或者禁用元素
*/

/* 4.添加权限
1.外层添加权限在路由中，新添加的指令要配置路由页面
2.里层权限添加在 按钮中，值可以在指令后面使用
3.将指令配置给角色，角色再给用户
*/

// 界面小bug：1.* 通配符要拼接在动态路由后面 2.退出销毁路由调用花裤衩在路由封装的方法
// 按钮小bug: 当我们直接到有使用指令的路由时按刷新vuex数据会获取不到,后面数据加可选链,有就执行后面的没有就不执行
